<template>
  <div class="login">
    <div class="login-area">
      <div class="title">登录</div>
      <div class="user-id">
        <img src="../assets/img/user.png" alt="" />
        <input type="text" placeholder="用户名" v-model="userid" />
      </div>
      <div class="password">
        <img src="../assets/img/lock.png" alt="" />
        <input
          type="password"
          placeholder="密码"
          v-model="password"
          @keyup.enter="login"
        />
      </div>
      <div class="tips" v-if="idShow">用户名不能为空！</div>
      <div class="tips" v-if="pwdShow">密码不能为空！</div>
      <button class="login-button" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import { request } from "../network/request";
export default {
  name: "",
  data() {
    return {
      userid: "",
      password: "",
      idShow: false,
      pwdShow: false,
    };
  },
  methods: {
    login() {
      if (this.userid == "" && this.password != "") {
        this.idShow = true;
        this.pwdShow = false;
      } else if (this.password == "") {
        this.idShow = false;
        this.pwdShow = true;
      } else {
        this.idShow = false;
        this.pwdShow = false;
        // this.$router.push("/function");
        request({
          // url: "http://httpbin.org/#/HTTP_Methods/get_get",
          // method: 'get',
          // url: "http://httpbin.org/post",
          // method: 'post',
          url: "http://118.31.51.131:8081/api/zsxt/user/login",
          method: "post",
          params: {
            name: this.userid,
            password: this.password,
          },
        })
          .then((value) => {
            console.log(value);
            console.log(value.data.data);
            if (value.data.data == "密码错误") {
              alert("密码错误，请重新登录");
            } else if (value.data.data == "该用户不存在") {
              alert("该用户不存在，请检查用户名是否正确");
            } else {
              sessionStorage.setItem("token", value.data.data);
              let token = sessionStorage.getItem("token");
              let length = sessionStorage.getItem("token").length;
              if (token[length - 6] != "0") {
                this.$router.push("/function/user");
              }else if(token[length - 5] != "0") {
                this.$router.push("/function/jhsc");
              }else if(token[length - 4] != "0") {
                this.$router.push("/function/zssjmlsc");
              }else if(token[length - 3] != "0") {
                this.$router.push("/function/fbxxmb");
              }else if(token[length - 2] != "0") {
                this.$router.push("/function/card");
              }else if(token[length - 1] != "0") {
                this.$router.push("/function/notice");
              }else {
                this.$router.push("/function/lnzsjhcx");
              }
            }
          })
          .catch((err) => {
            console.log(err);
            alert("登录失败，请稍后重试");
          });
      }
    },
  },
};
</script>

<style scoped>
.login {
  background: url("../assets/img/login_bg.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  min-height: calc(100vh - 132px);
}
.login-area {
  width: 500px;
  height: 500px;
  background-color: #fff;
  opacity: 0.8;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 160px);
  border-radius: 20px;
}
.title {
  color: #bf3338;
  font-size: 32px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  margin-left: 30px;
}
.user-id {
  position: absolute;
  top: 90px;
  left: 50px;
  width: 400px;
  border-bottom: 1px solid #333;
}
.user-id img {
  height: 45px;
  width: 45px;
}
.user-id input {
  border: none;
  outline: none;
  box-shadow: none;
  font-size: 20px;
  height: 30px;
  width: 250px;
  color: #666;
  transform: translate(15px, -10px);
}
.password {
  position: absolute;
  top: 180px;
  left: 50px;
  width: 400px;
  border-bottom: 1px solid #333;
}
.password img {
  height: 45px;
  width: 45px;
}
.password input {
  border: none;
  outline: none;
  box-shadow: none;
  font-size: 20px;
  height: 30px;
  width: 250px;
  color: #666;
  transform: translate(15px, -10px);
}
.tips {
  position: absolute;
  left: 50%;
  top: 260px;
  transform: translateX(-50%);
  color: red;
}
.login-button {
  width: 410px;
  height: 42px;
  border: none;
  outline: none;
  margin: 250px 0 0 45px;
  background-color: #bf3338;
  color: #fff;
  cursor: pointer;
}
.login-button:hover {
  background-color: #c01d1d;
}
.login-button:active {
  background-color: #931717;
}
</style>